<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
  <script src="../layui/layui.js"></script>
  <title></title>
  <style>

  </style>
</head>

<body>
  <div class="layui-container">
    <h3>CSS内置公共基础类</h3>
    <h5>布局 / 容器</h5>
    <img src="../img/01.png" alt="">
    <h5>辅助</h5>
    <img src="../img/02.png" alt="">
    <h5>文本</h5>
    <img src="../img/03.png" alt="">
    <h5>背景色</h5>
    <img src="../img/04.png" alt="">
    <h5>字体大小及颜色</h5>
    <img src="../img/05.png" alt="">
    <h3>CSS命名规范</h3>
    <p>class命名前缀：layui，连接符：-，如：class="layui-form"</p>
    <p>命名格式一般分为两种：一：layui-模块名-状态或类型，二：layui-状态或类型。因为有些类并非是某个模块所特有，他们通常会是一些公共类。如：一（定义按钮的原始风格）：class="layui-btn
      layui-btn-primary"、二（定义内联块状元素）：class="layui-inline"</p>
    <p>
      大致记住这些简单的规则，会让你在填充HTML的时候显得更加得心应手。另外，如果你是开发Layui拓展（模块），你最好也要遵循于类似的规则，并且请勿占用Layui已经命名好的类，假设你是在帮Layui开发一个markdown编辑器，你的css书写规则应该如下：
    </p>
    <img src="../img/06.png" alt="">
    <h3>HTML规范：结构</h3>
    <p>Layui在解析HTML元素时，必须充分确保其结构是被支持的。以Tab选项卡为例：</p>
    <h5>辅助</h5>
    <img src="../img/07.png" alt="">
    <p>你如果改变了结构，极有可能会导致Tab功能失效。所以在嵌套HTML的时候，你应该细读各个元素模块的相关文档（如果你不是拿来主义）</p>
    <h3>HTML规范：常用公共属性</h3>
    <p>很多时候，元素的基本交互行为，都是由模块自动开启。但不同的区域可能需要触发不同的动作，这就需要你设定我们所支持的自定义属性来作为区分。如下面的 lay-submit、lay-filter即为公共属性（即以 lay-
      作为前缀的自定义属性）：</p>
    <img src="../img/08.png" alt="">

  </div>

  <script>
    //从 layui 2.6.0 开始，由于内置模块会一次性加载，因此不必再执行 layui.use() 来加载对应模块，直接使用即可：
    ; !function () {
      var layer = layui.layer
        , form = layui.form;


    }();

  </script>
</body>

</html>